/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-10-14
 * @Description: 提取邮箱算子表单配置
 -->
<template>
    <div class="data-set operate_form">
        <sf-form ref="getEmailForm"
                 class="drawer-form__container"
                 :label-width="80">
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>选择字段</lang>
                </sf-fieldlabel>
                <sf-select v-model="formData.extractColumn"
                           :default-width="fieldWidth"
                           :allow-blank="false"
                           type="multi"
                           :allow-search="true"
                           :default-disabled="disabledStatus"
                           :options="fieldList" />
            </sf-form-item>
        </sf-form>
        <div v-if="!disabledStatus && showOperateBtn"
             class="add-operate__btn">
            <sf-button-primary
                class="btn-primary m-r10"
                @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div>
</template>

<script lang=ts>
import { Component, Vue, Ref } from 'vue-property-decorator';
import { deepClone } from 'src/util/deep_clone';
import {
    GET_EMAIL_DATA,
    ADD_DEFAULT_WIDTH,
    DEFAULT_WIDTH
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';
import { SfForm } from '@sxf/sf-vue-component';

@Component({
    name: 'ToggleCaseForm'
})
export default class GetEmailForm extends Vue {
    @Ref() getEmailForm!: SfForm


    formData: typeof GET_EMAIL_DATA = { ...GET_EMAIL_DATA }
    disabledStatus = false
    showOperateBtn = false
    fieldList = []
    timeFieldList = []
    get fieldWidth () {
        return this.showOperateBtn ? DEFAULT_WIDTH : ADD_DEFAULT_WIDTH;
    }

    reset () {
        this.formData = deepClone(GET_EMAIL_DATA);
        this.clearInvalidMsg();
    }
    clearInvalidMsg () {
        this.$nextTick(() => {
            this.getEmailForm.clearInvalid();
        });
    }
    getJsonValue () {
        // @ts-ignore
        this.formData.extractColumn = JSON.stringify(this.formData.extractColumn);
        return this.formData;
    }
    _submit () {
        // @ts-ignore
        this.formData.extractColumn = JSON.stringify(this.formData.extractColumn);
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }



    isValid () {
        return this.getEmailForm.isValid();
    }
};
</script>



